<template>
  <div style="padding: 10px">
    <div
      style="
        display: flex;
        margin-bottom: 8px;
        align-items: center;
        z-index: 100;
        background-color: white;
        width: 100%;
        height: 35px;
      "
    >
      汇率：<el-input
        size="small"
        style="width: 100px"
        v-model="dollerPrice"
        type="number"
      ></el-input>

      <div>
        <span style="margin: 0 8px"> 合计每年消费: </span>
        <span style="font-weight: 600"> {{ yearSum(tableData) }} 元 </span>
        <span style="margin: 0 8px">每月平均:</span>
        <span style="font-weight: 600">
          {{ (yearSum(tableData) / 12).toFixed(2) }} 元
        </span>
      </div>

      <el-button @click="clearFilter" size="small">清除所有过滤器</el-button>
      <el-button style="margin-left: auto" type="primary" size="small"
        >新增</el-button
      >
    </div>
    <el-table
      :row-style="{
        height: '40px',
      }"
      :cell-style="{
        padding: '0px',
      }"
      :data="
        tableData
          .slice((currentPage - 1) * pageSize, currentPage * pageSize)
          .filter(
            (data) =>
              !search || data.name.toLowerCase().includes(search.toLowerCase())
          )
      "
      height="700px"
      :default-sort="{ prop: 'date', order: 'descending' }"
      stripe
      style="width: 100%"
      border
      script
    >
      <el-table-column type="index" label="序号" width="50" align="center">
      </el-table-column>
      <el-table-column label="计入" align="center" width="50px">
        <template slot-scope="scope">
          <el-checkbox
            style="display: block"
            v-model="scope.row.isSum"
            active-color="#13ce66"
            :disabled="!scope.row.yearCost"
          >
          </el-checkbox>
        </template>
      </el-table-column>
      <el-table-column align="left" width="275px" sortable>
        <template slot="header" slot-scope="scope">
          <el-input
            style="width: 200px"
            v-model="search"
            size="small"
            placeholder="输入关键字搜索"
          />
        </template>
        <template slot-scope="scope">
          <span>
            {{ scope.row.name }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        :filters="typeList"
        :filter-method="filter_type"
        sortable
        prop="type"
        label="类型"
        align="center"
        width="85px"
      >
        <template slot-scope="scope">
          <span>
            <el-tag
              :type="
                scope.row.type === '工具'
                  ? 'info'
                  : scope.row.type === '生活'
                  ? 'success'
                  : scope.row.type === '游戏'
                  ? 'warning'
                  : scope.row.type === '影视'
                  ? 'danger'
                  : ''
              "
              size="small"
              >{{ scope.row.type }}</el-tag
            >
          </span>
        </template>
      </el-table-column>
      <el-table-column
        :filters="[
          { text: '5', value: 5 },
          { text: '4', value: 4 },
          { text: '3', value: 3 },
        ]"
        :filter-method="filter_primary"
        filter-placement="bottom-end"
        prop="primary"
        label="优先级"
        align="center"
        width="110px"
        sortable
      >
      </el-table-column>
      <el-table-column
        sortable
        prop="monthCost"
        label="月付"
        align="right"
        width="100px"
      >
        <template slot-scope="scope">
          <span>
            {{ formatter(scope.row.monthCost) }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        sortable
        prop="monthConst_2"
        label="包月"
        align="right"
        width="100px"
      >
        <template slot-scope="scope">
          <span>
            {{ formatter(scope.row.monthConst_2) }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        sortable
        prop="yearCost"
        label="年付包年"
        align="right"
        width="140px"
      >
        <template slot-scope="scope">
          <span>
            {{ formatter(scope.row.yearCost) }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="others" label="注释" align="left">
      </el-table-column>
      <el-table-column label="操作" align="center" width="100px">
        <template slot-scope="scope">
          <div>
            <el-button size="small" type="text">编辑</el-button>
            <el-button size="small" style="color: red" type="text"
              >删除</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[75, 100, 150]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
        style="height: 40px"
      >
      </el-pagination>
    </div>
    <div style="display: flex">
      <el-button
        style="margin-left: auto"
        type="info"
        size="small"
        plain
        @click="goBack()"
        >返回</el-button
      >
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    payListData: Array,
  },
  watch: {
    // 监听 dollerPrice 的变化
    dollerPrice (newVal, oldVal) {
      if (newVal === '') {
        this.dollerPrice = 1
      }
      this.initTableData();
    },
  },
  created () {
    this.initTableData()
  },
  methods: {
    yearSum (param) {
      let sumWithYear_isSum = 0;
      for (let i = 0; i < param.length; i++) {
        if (param[i].isSum) {
          sumWithYear_isSum =
            sumWithYear_isSum + Number(param[i].yearCost);
        }
      }
      return Number(sumWithYear_isSum.toFixed(2));
    },
    initTableData () {
      this.tableData = [
        {
          type: "生活",
          name: "汽车保险",
          primary: "5",
          monthCost: "",
          monthConst_2: "",
          yearCost: 500,
          others: "",
        }, {
          type: "生活",
          name: "燃油费",
          primary: "5",
          monthCost: 1000,
          monthConst_2: "",
          yearCost: 1000 * 12,
          others: "",
        }, {
          type: "生活",
          name: "汽车保养费",
          primary: "5",
          monthCost: "",
          monthConst_2: "",
          yearCost: 200,
          others: "",
        }, {
          type: "生活",
          name: "洗车费",
          primary: "5",
          monthCost: 30,
          monthConst_2: "",
          yearCost: 30 * 12,
          others: "",
        }, {
          type: "生活",
          name: "停车费",
          primary: "5",
          monthCost: "",
          monthConst_2: "",
          yearCost: "",
          others: "",
        },
        {
          type: "生活",
          name: "物业费",
          primary: "5",
          monthCost: "",
          monthConst_2: "",
          yearCost: "3850",
          others: "2.9元/平/月",
        },
        {
          type: "生活",
          name: "燃气费",
          primary: "5",
          monthCost: "50",
          monthConst_2: "",
          yearCost: 50 * 12,
          others: "",
          isSum: true,
        },
        {
          type: "生活",
          name: "电费",
          primary: "5",
          monthCost: 150,
          monthConst_2: "",
          yearCost: 150 * 12,
          others: "",
          isSum: true,
        },
        {
          type: "生活",
          name: "水费",
          primary: "5",
          monthCost: "",
          monthConst_2: "",
          yearCost: 50 * 12,
          others: "",
          isSum: true,
        },
        {
          type: "工具",
          name: "OneDrive 100g",
          primary: "1",
          monthCost: "15",
          monthConst_2: "",
          yearCost: "",
          others: "",
        },
        // {
        //   type: "工具",
        //   name: "IntelliJ IDEA",
        //   primary: "0",
        //   monthCost: "",
        //   monthConst_2: "",
        //   yearCost: "",
        //   others: "",
        // },
        {
          type: "工具",
          name: "WPS稻壳会员",
          primary: "2",
          monthCost: "20",
          monthConst_2: "20",
          seasonCost: "40",
          yearCost: "89",
          others: "",
        },
        {
          type: "工具",
          name: "Microsoft 365 个人版1T",
          primary: "2",
          monthCost: "39",
          monthConst_2: "",
          yearCost: "398",
          others: "",
        },
        {
          type: "工具",
          name: "百度网盘超级会员",
          primary: "2",
          monthCost: "30",
          monthConst_2: "25",
          seasonCost: "88",
          seasonCost_2: "68",
          yearCost: 263,
          others: "",
        },
        {
          type: "工具",
          name: "百度网盘会员",
          primary: "2",
          monthCost: "10",
          monthConst_2: "10",
          seasonCost: "30",
          yearCost: "96",
          others: "",
        },
        {
          type: "工具",
          name: "阿里云盘",
          primary: "4",
          monthCost: "",
          monthConst_2: "",
          yearCost: "138",
          others: "",
          isSum: true,
        },
        {
          type: "工具",
          name: "阿里云盘第三方权益包",
          primary: "4",
          monthCost: "",
          monthConst_2: "",
          yearCost: 10 * 12,
          others: "",
          isSum: true,
        },
        {
          type: "工具",
          name: "夸克网盘",
          primary: "1",
          monthCost: "",
          monthConst_2: "",
          yearCost: "",
          isSum: true,
          others: "88VIP赠送",
        },
        {
          type: "工具",
          name: "迅雷超级会员",
          primary: "2",
          monthCost: "30",
          monthConst_2: "25",
          seasonCost: "90",
          seasonCost_2: "69",
          yearCost: "264",
          others: "",
        },
        {
          type: "工具",
          name: "迅雷白金会员",
          primary: "3",
          monthCost: "15",
          monthConst_2: "12.6",
          seasonCost: "39",
          seasonCost_2: "36",
          yearCost: "149",
          others: "",
        },
        {
          type: "工具",
          name: "AD-Guard",
          primary: "2",
          monthCost: "",
          monthConst_2: "",
          yearCost: "",
          others: "广告拦截",
          isSum: true,
        },
        {
          type: "工具",
          name: "chatGPT4.0",
          primary: "3",
          monthCost: "",
          monthConst_2: "",
          yearCost: 20 * this.dollerPrice * 12,
          others: "",
        },
        {
          type: "工具",
          name: "chatGPT API",
          primary: "3",
          monthCost: "",
          monthConst_2: "",
          yearCost: this.dollerPrice,
          others: "",
        },
        {
          type: "工具",
          name: "Notion AI",
          primary: "1",
          monthCost: "",
          monthConst_2: "",
          yearCost: "",
          others: "",
        },
        {
          type: "工具",
          name: "Xmind",
          primary: "2",
          monthCost: "",
          monthConst_2: "",
          yearCost: "388",
          others: "",
        },
        {
          type: "工具",
          name: "IMDb api",
          primary: "1",
          monthCost: "",
          monthConst_2: "",
          yearCost: "",
          others: "",
        },
        {
          type: "工具",
          name: "UU加速器",
          primary: "4",
          monthCost: "30",
          monthConst_2: "30",
          yearCost: 283,
          others: "",
          isSum: true,
        },
        {
          type: "工具",
          name: "GitHub Coplit",
          primary: "3",
          monthCost: "",
          monthConst_2: "",
          yearCost: 10 * this.dollerPrice * 12,
          others: "",
        },
        {
          type: "工具",
          name: "飞机场",
          primary: "5",
          monthCost: 88 / 12,
          monthConst_2: "",
          yearCost: 88,
          others: "星云:2300g每年20人5000MB/S带宽",
          isSum: true,
        },
        {
          type: "生活",
          name: "5元保号套餐",
          primary: "5",
          monthCost: "5",
          monthConst_2: "5",
          yearCost: 5 * 12,
          others: "",
          isSum: true,
        },
        {
          type: "生活",
          name: "副卡数据流量",
          primary: "5",
          monthCost: 19,
          monthConst_2: "",
          yearCost: 19 * 12,
          others: "",
          isSum: true,
        },
        {
          type: "生活",
          name: "融合宽带",
          primary: "5",
          monthCost: 100,
          monthConst_2: "",
          yearCost: 100 * 12,
          others: "千兆光纤+70g流量语音融合套餐+4副卡",
          isSum: true,
        },
        {
          type: "生活",
          name: "88VIP",
          primary: "5",
          monthCost: "",
          monthConst_2: "",
          yearCost: 88,
          others: "",
          isSum: true,
        },
        {
          type: "生活",
          name: "高德打车",
          primary: "3",
          monthCost: "0",
          monthConst_2: "0",
          yearCost: "0",
          others: "88会员赠送",
        },
        {
          type: "生活",
          name: "菜鸟裹裹",
          primary: "3",
          monthCost: "",
          monthConst_2: "",
          yearCost: "",
          others: "",
        },
        {
          type: "生活",
          name: "顺丰速运",
          primary: "2",
          monthCost: "",
          monthConst_2: "",
          yearCost: "",
          others: "",
        },
        {
          type: "生活",
          name: "京东plus",
          primary: "3",
          monthCost: "",
          monthConst_2: "",
          yearCost: 88,
          others: "",
        },
        {
          type: "生活",
          name: "淘票票电影",
          primary: "4",
          monthCost: "",
          monthConst_2: "",
          yearCost: "",
          others: "",
        },
        {
          type: "生活",
          name: "猫眼电影",
          primary: "4",
          monthCost: "",
          monthConst_2: "",
          yearCost: "",
          others: "",
        },
        {
          type: "生活",
          name: "饿了么超级吃货卡",
          primary: "5",
          monthCost: "0",
          monthConst_2: "0",
          yearCost: "0",
          others: "88会员赠送",
          isSum: true,
        },
        {
          type: "生活",
          name: "美团外卖券5元红包*12张",
          primary: "5",
          monthCost: "12.9",
          monthConst_2: "12.9",
          yearCost: 10 * 12,
          others: "",
          isSum: true,
        },
        {
          type: "影视",
          name: "优酷视频",
          primary: "2",
          monthCost: "15",
          monthConst_2: "15",
          yearCost: "99",
          others: "88会员赠送",
        },
        {
          type: "影视",
          name: "Netflix",
          primary: "2",
          monthCost: "",
          monthConst_2: "",
          yearCost: "",
          others: "",
        },
        {
          type: "影视",
          name: "DisneyPlus",
          primary: "2",
          monthCost: "",
          monthConst_2: "",
          yearCost: "",
          others: "",
        },
        {
          type: "影视",
          name: "BILIBILI大会员",
          primary: "3",
          monthCost: "25",
          monthConst_2: "15",
          yearCost: "148",
          others: "",
        },
        {
          type: "影视",
          name: "腾讯视频",
          primary: "3",
          monthCost: "20",
          monthConst_2: "12",
          yearCost: "158",
          others: "",
        },
        {
          type: "影视",
          name: "爱奇艺",
          primary: "3",
          monthCost: "25",
          monthConst_2: "19",
          yearCost: "218",
          others: "",
        },
        {
          type: "影视",
          name: "Infuse",
          primary: "4",
          monthCost: "14.3",
          monthConst_2: "14.3",
          yearCost: "94",
          others: "",
          isSum: true,
        },
        {
          type: "音乐",
          name: "豪华绿钻+音乐包",
          primary: "0",
          monthCost: "15",
          monthConst_2: "15",
          yearCost: "168",
          others: "",
        },
        {
          type: "音乐",
          name: "网易云音乐",
          primary: "5",
          monthCost: "0",
          monthConst_2: "0",
          yearCost: "0",
          others: "88会员赠送",
          isSum: true,
        },
        {
          type: "游戏",
          name: "MineCraft Realms",
          primary: "3",
          monthCost: 3.99 * this.dollerPrice,
          monthConst_2: "",
          yearCost: 3.99 * this.dollerPrice * 12,
          others: "3.99美元",
        },
        {
          type: "游戏",
          name: "MineCraft Realms PLUS",
          primary: "2",
          monthCost: 3.99 * this.dollerPrice,
          monthConst_2: "",
          yearCost: 7.99 * this.dollerPrice * 12,
          others: "7.99美元",
        },
        {
          type: "游戏",
          name: "任天堂会员",
          primary: "2",
          monthCost: "",
          monthConst_2: "",
          yearCost: "",
          others: "",
        },
        {
          type: "游戏",
          name: "炉石传说战令",
          primary: "3",
          monthCost: "",
          monthConst_2: "",
          yearCost: "384",
          others: "",
        },
        {
          type: "游戏",
          name: "索尼游戏会员",
          primary: "2",
          monthCost: "",
          monthConst_2: "",
          yearCost: "",
          others: "",
        },
        {
          type: "游戏",
          name: "GAME PASS FOR PC",
          primary: "3",
          monthCost: "32",
          monthConst_2: "32",
          yearCost: "",
          others: "",
        },
        {
          type: "游戏",
          name: "GAME PASS ultimate",
          primary: "3",
          monthCost: "98",
          monthConst_2: "98",
          yearCost: "",
          others: "",
        },
        {
          type: "游戏",
          name: "Xbox Game Pass",
          primary: "3",
          monthCost: "",
          monthConst_2: "",
          yearCost: "",
          others: "10.99美元、29港币",
        },
        {
          type: "游戏",
          name: "Xbox Game Pass Ultimate",
          primary: "3",
          monthCost: "",
          monthConst_2: "",
          yearCost: "",
          others: "16.99美元、85港币",
        },
        {
          type: "其他",
          name: "QQ超级会员",
          primary: "0",
          monthCost: "20",
          monthConst_2: "14",
          yearCost: "",
          others: "",
        },
        {
          type: "其他",
          name: "QQ大会员",
          primary: "0",
          monthCost: "35",
          monthConst_2: "30",
          yearCost: "420",
          others: "",
        },
        {
          type: "其他",
          name: "豪华黄钻",
          primary: "0",
          monthCost: "15",
          monthConst_2: "15",
          yearCost: "",
          others: "",
        },
        {
          type: "其他",
          name: "知乎",
          primary: "0",
          monthCost: "25",
          monthConst_2: "19",
          yearCost: "198",
          others: "",
        },
        {
          type: "其他",
          name: "贴吧超级会员",
          primary: "0",
          monthCost: "30",
          monthConst_2: "24",
          yearCost: "180",
          others: "",
        },
        {
          type: "其他",
          name: "黄钻",
          primary: "1",
          monthCost: "10",
          monthConst_2: "10",
          yearCost: "",
          others: "",
        }, {
          type: "工具",
          name: "iCloud50g网盘",
          primary: "5",
          monthCost: "6",
          monthConst_2: "",
          yearCost: this.dollerPrice * 12,
          others: "",
        },
        {
          type: "工具",
          name: "iCloud200g网盘",
          primary: "5",
          monthCost: "21",
          monthConst_2: "21",
          yearCost: 21 * 12,
          others: "",
          isSum: true,
        },
        {
          type: "工具",
          name: "iCloud2T网盘",
          primary: "1",
          monthCost: "",
          monthConst_2: "",
          yearCost: 68 * 12,
          others: "",
        },
        {
          type: "工具",
          name: "Apple One 50GB",
          primary: "2",
          monthCost: "",
          monthConst_2: "",
          yearCost: "",
          others: "26美元",
        },
        {
          type: "工具",
          name: "Apple One 200GB",
          primary: "2",
          monthCost: "",
          monthConst_2: "",
          yearCost: "",
          others: "38美元",
        },
        {
          type: "工具",
          name: "Apple One 2TB",
          primary: "2",
          monthCost: "",
          monthConst_2: "",
          yearCost: "",
          others: "10美元",
        },
        {
          type: "影视",
          name: "Apple TV+",
          primary: "1",
          monthCost: "",
          monthConst_2: "",
          yearCost: 11 * this.dollerPrice,
          others: "11美元",
        },
        {
          type: "音乐",
          name: "Apple Music",
          primary: "1",
          monthCost: "",
          monthConst_2: "",
          yearCost: "",
          others: "7美元",
        },
        {
          type: "游戏",
          name: "Apple Acrade",
          primary: "3",
          monthCost: "",
          monthConst_2: "",
          yearCost: "",
          others: "",
        },
        {
          type: "工具",
          name: "Apple Fitness+",
          primary: "1",
          monthCost: "",
          monthConst_2: "",
          yearCost: "",
          others: "",
        },
        {
          type: "工具",
          name: "Apple News+",
          primary: "1",
          monthCost: "",
          monthConst_2: "",
          yearCost: "",
          others: "",
        },
      ]
      // for(let i=0;i<this.tableData.length;i++) {
      // 	if(this.tableData[i].primary == '5') {
      // 		this.tableData[i].isSum = true
      // 	}
      // }
      for (let i = 0; i < this.tableData.length; i++) {// 将所有值变为数字类型，0->''空字符串
        if (this.tableData[i].primary == "") {
          this.tableData[i].isSum = false;
        }
      }

      var objDeepCopy = function (source) {
        var sourceCopy = source instanceof Array ? [] : {};
        for (var item in source) {
          sourceCopy[item] =
            typeof source[item] === "object"
              ? objDeepCopy(source[item])
              : source[item];
        }
        return sourceCopy;
      };

      let newObjArray = objDeepCopy(this.tableData);

      function isNumeric (str) {
        return /^\d+$/.test(str);
      }

      newObjArray.forEach((obj) => {
        for (let key in obj) {
          if (obj.hasOwnProperty(key)) {
            if (obj[key] === "") {
              obj[key] = 0;
            } else if (isNumeric(obj[key])) {
              obj[key] = Number(obj[key]);
            }
          }
        }
      });
      this.tableData = newObjArray
    },
    getSummaries (param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "总价";
          return;
        }
        if (index === 1 || index === 2 || index === 3) {
          // 不是金额相关没必要显示合计
          sums[index] = "";
          return;
        }
        const values = data.map((item) => Number(item[column.property]));
        if (!values.every((value) => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] = sums[index].toFixed(2) + " 元";
        } else {
          sums[index] = "";
        } if (index === 10) {
          // 只求计入计算部分的和
          console.log("paramparamparam", param);
          let sumWithYear_isSum = 0;
          for (let i = 0; i < param.data.length; i++) {
            if (param.data[i].isSum) {
              sumWithYear_isSum =
                sumWithYear_isSum + Number(param.data[i].yearCost);
            }
          }
          sums[10] = sumWithYear_isSum.toFixed(2) + " 元";
        }
      });
      return sums;
    },
    clearFilter () {
      // 表头搜索
      this.$refs.filterTable.clearFilter();
    },
    filter_type (value, row) {
      return row.type === value;
    },
    filter_primary (value, row) {
      // 过滤类型
      return row.primary === value;
    },
    goBack () {
      this.$parent.$parent.closeDraw_hy();
    },
    formatter (cellValue) {
      // 表格的金额格式化 **全部页面共用**
      if (!cellValue) {
        return "";
      }

      function number_format (number, decimals, dec_point, thousands_sep) {
        number = (number + "").replace(/[^0-9+-Ee.]/g, "");
        var n = !isFinite(+number) ? 0 : +number,
          prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
          sep = typeof thousands_sep === "undefined" ? "," : thousands_sep,
          dec = typeof dec_point === "undefined" ? "." : dec_point,
          s = "",
          toFixedFix = function (n, prec) {
            var k = Math.pow(10, prec);
            return "" + Math.ceil(n * k) / k;
          }; s = (prec ? toFixedFix(n, prec) : "" + Math.round(n)).split(".");
        var re = /(-?\d+)(\d{3})/;
        while (re.test(s[0])) {
          s[0] = s[0].replace(re, "$1" + sep + "$2");
        }
        if ((s[1] || "").length < prec) {
          s[1] = s[1] || "";
          s[1] += new Array(prec - s[1].length + 1).join("0");
        }
        return s.join(dec);
      }
      var num = number_format(cellValue, 2, ".", ",");
      return "¥ " + num;
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
  },

  data () {
    return {
      tableData: [],
      dollerPrice: 7.3,
      typeList: [
        {
          text: "生活",
          value: "生活",
        },
        {
          text: "工具",
          value: "工具",
        },
        {
          text: "音乐",
          value: "音乐",
        },
        {
          text: "影视",
          value: "影视",
        },
        {
          text: "游戏",
          value: "游戏",
        },
      ],
      search: "",
      currentPage: 1,
      pageSize: 75,
    };
  },
};
</script>

<style scoped>
</style>